<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器-nth-child</title>
    <style>
        
        /* 1.把所有的偶数 even的孩子选出来 */
        .box1 li:nth-child(even){
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        .box1 li:nth-child(odd){
            background-color: gray;
        }

        /* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能使其他的字母. nth-child(n)就相当于选择了所有的孩子 */
        /* n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 ) */
        .box2 li:nth-child(n){
            background-color: pink;
        }

       
      
    </style>
</head>
<body>
    <ul class="box1" >
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>

    <ul class="box2" >
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>
</html>